<template>
	<view class="container">
		<!-- #ifdef H5 -->
		<u-navbar bgColor="#0e3a5e" title="计划列表" :safeAreaInsetTop="true" :placeholder="true" leftIconColor="#0e3a5e"
			:titleStyle="data.titleStyle">
		</u-navbar>
		<!-- #endif -->
		<u-sticky>
			<!-- #ifdef APP-PLUS -->
			<u-navbar bgColor="#0e3a5e" title="计划列表" :safeAreaInsetTop="true" :placeholder="true"
				leftIconColor="#0e3a5e" :titleStyle="data.titleStyle">
			</u-navbar>
			<!-- #endif -->
			<header-role/>
		</u-sticky>

		<mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="listBox" v-if="data.list.length">
				<view class="planCard" v-for="(cardData, index) in data.list" :key="index" @tap="go(cardData)">
					<view class="top">
						<view class="title">
							产品编号：{{cardData.number}}
						</view>
						<u-tag :text="cardData.statusName" v-if="cardData.status === 'DFB'" type="error"></u-tag>
						<u-tag :text="cardData.statusName" type="warning" v-if="cardData.status === 'DKG'"></u-tag>
						<u-tag :text="cardData.statusName" type="warning" v-if="cardData.status === 'DSX'"></u-tag>
						<u-tag :text="cardData.statusName" v-if="cardData.status === 'SCZ'"></u-tag>
						<u-tag :text="cardData.statusName" type="success" v-if="cardData.status === 'WGTS'"></u-tag>
						<u-tag :text="cardData.statusName" type="success" v-if="cardData.status === 'PGFH'"></u-tag>
						<u-tag :text="cardData.statusName" type="success" v-if="cardData.status === 'FHCC'"></u-tag>
					</view>

					<view class="form">
						<view class="labelItem">
							<text>产品名称：</text>
							<text>{{cardData.name}}</text>
						</view>
						<view class="labelItem" style="justify-content: space-between;">
							<view class="">
								<text>计划结束：</text>
								<text>{{$u.timeFormat(cardData.planEndTime, 'yyyy年mm月dd日')}}</text>
							</view>
							<u-tag v-if="data.role === '调试'" type="warning" text="关重件"
								@click="goImportant(cardData.id)"></u-tag>

						</view>
						<view class="labelItem" v-if="data.role === '生产' || data.role === '主管' || data.role === '品管'">
							<text>进度：</text>
							<lx-progress-bar title='' :total="100" :first-value="cardData.progress*1" barRadius="30rpx"
								barHeight="30rpx" textPosition="outside" contentColor='#74C3EA' textColor='#000'
								:percentum='true' />
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>

	</view>
</template>

<script lang="ts" setup>
	import { getEquipmentList } from '@/api/planList/planList.js'
	import { reactive, } from "vue";
	import { onShow, onLoad, onPageScroll, onReachBottom,onUnload } from "@dcloudio/uni-app";
	import useMescroll from "@/uni_modules/mescroll-uni/hooks/useMescroll.js";


	const upOption = {
		noMoreSize: 10, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看
		textNoMore: '-- 没有更多啦 --', // 没有更多数据的提示文本
		empty: {
			tip: '~ 暂无数据 ~' // 提示
		}
	}

	const { mescrollInit, downCallback, getMescroll } = useMescroll(onPageScroll, onReachBottom)
	const data : any = reactive({
		list: [],
		activeStation: null,
		role: '',
		titleStyle: {
			color: '#fff',
			fontSize: '34rpx',
			fontWeight: '600'
		},
	});
	onLoad(() => {


	})
	onShow(() => {
		try{
			data.role = uni.getStorageSync('role');
			uni.$on('refresh', res => {
				getMescroll().resetUpScroll()
			})
		}catch(e){
			//TODO handle the exception
		}
	});
	onUnload(()=>{
		uni.$off('refresh')
	})
	const upCallback = async (mescroll) => {
		try {
			const params = {
				current: mescroll.num,
				size: mescroll.size,
			}
			if (data.role === '调试') {
				params.status = 'WGTS'
			}
			if (data.role === '生产' || data.role === '品管') {
				params.status = 'B-FHCC'
			}
			const res = await getEquipmentList(params)
			const curPageData = res.data.records || [] // 当前页数据
			if (mescroll.num == 1) data.list = []; // 第一页需手动制空列表
			data.list = data.list.concat(curPageData)
			mescroll.endByPage(curPageData.length, res.data.total);
		} catch (e) {
			//TODO handle the exception
		}
	}

	const go = (cardData) => {
		if (data.role === '生产') {
			uni.navigateTo({
				url: '/pages/productAction/productAction?data=' + JSON.stringify(cardData)
			})
		} else {
			goToShakeDown(cardData)
		}
	}
	const goToShakeDown = (cardData) => {
		uni.navigateTo({
			url: '/pages/shakeDown/index?planEqmId=' + cardData.id + '&planStatus=' + cardData.status
		})
	}
	const goMy = () => {
		uni.navigateTo({
			url: '/pages/my/my'
		})
	}
	const goImportant = (id) => {
		uni.navigateTo({
			url: '/pages/keyImportant/index?planEqmId=' + id
		})
	}
</script>

<style lang="less" scoped>
	.stickyBox {
		background: #FFFFFF;
		margin-bottom: 28rpx;
		width: 100%;
		padding-top: 24rpx;
		overflow: hidden;
	}

	.user {
		background: #FFFFFF;
		box-shadow: 0px 11px 17px 0px #DAEBFF;
		border-radius: 26rpx 26rpx 26rpx 26rpx;
		border: 1px solid #DAEBFF;
		margin: 24rpx;
		margin-top: 0;
		padding: 24rpx;
		display: flex;
		justify-content: space-between;

		.user_avatar {
			display: flex;
			align-items: center;
			font-size: 1.125rem;
			font-weight: bold;

		}
	}

	.listBox {
		padding-left: 34rpx;
		padding-right: 34rpx;
	}

	.activeStation {
		display: flex;
		align-items: center;

		.ac_title {
			color: #0E3A5E;
			font-size: 1.125rem;
			font-weight: bold;
		}

		.ac_num {
			width: 86rpx;
			height: 91rpx;
			background: #74C3EA;
			border-radius: 11rpx 11rpx 11rpx 11rpx;
			line-height: 91rpx;
			text-align: center;
			margin-left: 12rpx;
			color: #fff;
			font-weight: bold;
		}
	}

	.u-grid-item {
		// margin-bottom: 20rpx;
		// align-items: flex-start;
	}

	.labelItem {
		font-size: 32rpx;
		padding: 10rpx 0;
		display: flex;
		align-items: center;
	}

	.planCard {
		background: #fff;
		color: #000;
		padding: 20rpx;
		border-radius: 10rpx;
		margin-bottom: 40rpx;
		box-shadow: 0 0 20rpx 6rpx #DAEBFF;
		.top {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}

		.title {
			color: #000;
			margin-bottom: 0;
		}

		.progress-bar {
			flex: 1
		}

	}
</style>